<template>
	<div id="pay_earnest" class="dialog animated" :class="open? 'fadeIn':'fadeOut'" v-show="show">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				交订金（{{clue.realName}}）
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="form">
				<div class="row">
					<label class="label">
						<span style="color: red;">*</span>
						订金金额</label>
					<el-input v-model="param.money" id="money" style="width: 3rem;" placeholder=""></el-input>
				</div>
				<div class="row">
					<label class="label">
						<span style="color: red;">*</span>
						适用课程</label>
					<el-select style="width: 3rem;" id="selectCourse" placeholder="请选择" v-model="param.selectCourse">
						<el-option
							style="width: 3rem;"
							v-for="item in courseList"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="row">
					<div class="radio_group">
						<label class="radio" v-for="item in payMode" @click="param.payMode = item.value">
							<span class="radio_circle" :class="param.payMode==item.value? 'radio_active' : ''"></span>
							<span class="radio_name">{{item.name}}</span>
						</label>
					</div>
					<!--<el-button type="warning" class="addType" size="mini" round>增加分类</el-button>-->
				</div>
				
				<div class="row">
					<label class="label">备注</label>
					<el-input v-model="param.remark" id="remark" style="width: 3rem;" placeholder=""></el-input>
				</div>
				
				<div class="row">
					<label class="label">收据编号</label>
					<el-input v-model="param.receiptNo" id="receiptNo" style="width: 3rem;" placeholder=""></el-input>
				</div>
				
			</div>
			<div class="btn_div">
				<div class="btn_cancel" @click="cancel()">取 消</div>
				<div class="btn_sure" @click="sure()">确 认</div>
			</div>
		</div>
	
	</div>
</template>

<script>
var vm,dict;
export default {
	data : function() {
		return {
			show : false,
			open : false,
			clue : {},
			param : {},
			payMode : null,
			courseList:[]
		}
	},
	watch : {
		"param.money" : function(val) {
			this.param.money = tool.parseInt(val);
		}
	},
	methods : {
		init : function(clue) {
			vm.show = true;
			vm.open = true;
			//初始化数据
			vm.clue = clue;
			vm.param = {
				clueId: clue.clueId,
				money: "",
				selectCourse:'',
			    payMode: vm.payMode[0].value,
			    incomePayMode: "",
			    receiptNo: "",
			    remark: "",
			    _wait : ""
			};
		},
		cancel : function() {
			//隐藏弹窗
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
			},500);
		},
		sure : function() {
			//验证规则
			var rules = [{
				judge : vm.param.money && vm.param.money<=50000,
				focus : $("#pay_earnest #money"),
				tips : "请输入0~50000范围内的金额"
			},{
				judge : vm.param.selectCourse,
				focus : $("#pay_earnest #selectCourse"),
				tips : "请选择适用课程"
			},{
				judge : vm.param.remark.length<=100,
				focus : $("#pay_earnest #remark"),
				tips : "请输入100个字符以内的备注"
			},{
				judge : vm.param.receiptNo.length<=20,
				focus : $("#pay_earnest #receiptNo"),
				tips : "请输入20个字符以内的收据编号"
			}];
			if(!tool.validate(rules)) {
				return;
			}
			
			api.payMoney(vm.param).then(function(data) {
				tool.message({ showClose: true, message: "交订金成功", type: 'success' });
				vm.$emit('callback');
			    vm.cancel();
			})
			
		},
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict,true);
		vm.payMode = dict["pay_mode"];
	}
}
</script>

<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/radio.css"></style>
<style scoped>
	.panel {
		width: 5.5rem;
	}
	.radio {
		display: block;
	}
	.radio_group {
		line-height: 0.3rem;
		padding-left: 1.1rem;
	}
	
	.form {
		padding: 0 0.3rem;
		font-size: 0.16rem;
		color: #666666;
	}
	.row {
		line-height: 0.5rem;
	}
	.label {
		min-width: 0.85rem;
		display: inline-block;
		text-align: right;
		margin-right: 0.1rem;
	}
</style>